<template>
  <div class="mod-config">
    <basic-container>
      <el-form
        :model="dataForm"
        :rules="dataRule"
        ref="dataForm"
        label-width="100px"
      >

        <el-form-item label="积分规则说明" prop="ruleContent">
          <quill-editor
                v-model="dataForm.ruleContent"
                ref="myQuillEditor"
                :options="editorOption">
            </quill-editor>
        </el-form-item>
      </el-form>

      <div style="text-align: center;">
        <el-button type="primary" @click="dataFormSubmit()">保存</el-button>
      </div>
     

    </basic-container>
  </div>
</template>


<script>
import { fetchList,getObj, addObj, putObj } from "@/api/shop_point/rule";
import { quillEditor } from 'vue-quill-editor'

export default {
  props:{
    visible: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      canSubmit: false,
      dataForm: {},
      dataRule: {
      },

      // 富文本编辑器配置
      editorOption: {
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
            ['blockquote', 'code-block'], // 引用  代码块
            [{ header: 1 }, { header: 2 }], // 1、2 级标题
            [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
            [{ script: 'sub' }, { script: 'super' }], // 上标/下标
            [{ indent: '-1' }, { indent: '+1' }], // 缩进
            [{ direction: 'rtl' }], // 文本方向
            [{ size: ['12', '14', '16', '18', '20', '22', '24', '28', '32', '36'] }], // 字体大小
            [{ header: [1, 2, 3, 4, 5, 6] }], // 标题
            [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
            // [{ font: ['songti'] }], // 字体种类
            [{ align: [] }], // 对齐方式
            ['clean'], // 清除文本格式
            ['image', 'video'] // 链接、图片、视频
          ]
        },
        placeholder: '请输入正文'
      },


    };
  },
  components: {
    quillEditor
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.canSubmit = true;
      // if(id){
      //   getObj(id).then((response) => {
      //     this.dataForm = response.data.data;
      //   });
      // }

      fetchList(
        Object.assign({
          current: 1,
          size: 10
        })
      ).then((response) => {
        debugger
        let data = response.data.data.records;
        console.log(data)
        if(data.length > 0){
          this.dataForm = data[0];
        }
      });
      
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          this.canSubmit = false;
          if (this.dataForm.id) {
            putObj(this.dataForm)
              .then((data) => {
                this.$notify.success("修改成功");
                this.$emit("refreshDataList");
                this.closeDialog()
              })
              .catch(() => {
                this.canSubmit = true;
              });
          } else {
            addObj(this.dataForm)
              .then((data) => {
                this.$notify.success("添加成功");
                this.$emit("refreshDataList");
                this.closeDialog()
              })
              .catch(() => {
                this.canSubmit = true;
              });
          }
        }
      });
    },
    //重置表单
    closeDialog() {
      this.$emit('update:visible', false)
    },
  },
};
</script>